<template>

  <div class="Menu_container">
     <router-link 
     :to="{name:item.name}" 
     v-for="item in demo" 
     :key="item.link"
     :exact="item.exact" 
     >
        <div class="icon">
          <Icon :type="item.icon" />
        </div>
        <span>{{item.txt}}</span>
      </router-link>
  </div>
</template>

<script>
import Icon from "@/components/Icon";
export default {
  data() {
    return {
      demo:[
        {
          id:1,
          name:"Home",
          link:"/",
          icon:"home",
          txt:"首页",
          exact:true
        },
          {
          id:2,
          name:"Blog",
          link:"/blog",
          icon:"blog",
          txt:"文章",
          exact:false
        },
          {
          id:3,
          name:"About",
          link:"/about",
          icon:"about",
          txt:"关于我",
          exact:false
        },
          {
          id:4,
          name:"Project",
          link:"/project",
          icon:"code",
          txt:"项目&效果",
          exact:false
        },
          {
          id:5,
          name:"Message",
          link:"/message",
          icon:"chat",
          txt:"留言板",
          exact:false
        },
      ]
    }
  },
  components: {
    Icon,
  },
};
</script>

<style lang="less" scoped>
@import url("~@/style/var.less");
@import url("~@/style/global.less");
.Menu_container {
 color: @gray;
 margin: 24px 0;
 a{
   padding: 0 50px;
   display: block;
   display: flex;
   align-items: center;
   height: 45px;
   .icon{
     width: 24px;
   }
   &:hover{
     color: #fff;
   }
   &.router-link-active{
     background: #2d2d2d;
   }
 }
}
</style>
